```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Swagger2 完全指南 | RESTful API 文档自动化</title>
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: #333;
            line-height: 1.6;
        }
        .hero {
            background: linear-gradient(135deg, #6e8efb, #a777e3);
        }
        .code-block {
            background-color: #2d2d2d;
            border-radius: 8px;
            color: #f8f8f2;
        }
        .feature-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 25px rgba(0,0,0,0.1);
        }
        .annotation-table th {
            background-color: #f8f9fa;
        }
        .swagger-ui-preview {
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
            transition: all 0.3s ease;
        }
        .swagger-ui-preview:hover {
            box-shadow: 0 8px 24px rgba(0,0,0,0.15);
        }
        .section-divider {
            height: 1px;
            background: linear-gradient(to right, transparent, rgba(0,0,0,0.1), transparent);
        }
        .drop-cap::first-letter {
            float: left;
            font-size: 4rem;
            line-height: 0.7;
            margin: 0.1em 0.2em 0 0;
            color: #6e8efb;
        }
    </style>
</head>
<body class="bg-gray-50">
    <!-- Hero Section -->
    <section class="hero text-white py-20 px-4">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col items-center text-center">
                <div class="mb-6">
                    <i class="fas fa-code text-5xl opacity-80"></i>
                </div>
                <h1 class="text-4xl md:text-5xl font-bold mb-4 leading-tight">Swagger2 完全指南</h1>
                <p class="text-xl md:text-2xl font-light max-w-3xl opacity-90 mb-8">RESTful API 文档自动化与可视化解决方案</p>
                <div class="flex space-x-4">
                    <a href="#getting-started" class="px-6 py-3 bg-white text-indigo-600 font-medium rounded-lg hover:bg-opacity-90 transition">开始使用</a>
                    <a href="#annotations" class="px-6 py-3 border-2 border-white text-white font-medium rounded-lg hover:bg-white hover:bg-opacity-10 transition">注解详解</a>
                </div>
            </div>
        </div>
    </section>

    <!-- Introduction Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-5xl">
            <div class="flex flex-col md:flex-row items-center">
                <div class="md:w-1/2 mb-8 md:mb-0 md:pr-8">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800">什么是 Swagger2？</h2>
                    <p class="drop-cap text-gray-700 mb-6 leading-relaxed">Swagger 是一个 Restful 风格接口的文档在线自动生成和测试的框架。用于生成、描述、调用和可视化 RESTful 风格的 Web 服务，特别适合前后端分离开发模式中生成 API 文档。</p>
                    <p class="text-gray-700 mb-6 leading-relaxed">实际开发中接口总是在不断变化，维护文档成为一个烦恼的问题，Swagger 就是为解决这个问题而生的开源项目。</p>
                    
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 mb-6">
                        <h3 class="font-bold text-blue-800 mb-2">接口 vs 接口文档</h3>
                        <p class="text-blue-700"><span class="font-medium">接口:</span> 不是我们习惯的 interface，可以理解为一个 Controller 的路径。</p>
                        <p class="text-blue-700"><span class="font-medium">接口文档:</span> 对 Controller 方法的说明，比如请求地址，请求方式，请求参数等。</p>
                    </div>
                </div>
                <div class="md:w-1/2">
                    <div class="bg-gray-100 p-6 rounded-lg shadow-md">
                        <div class="mermaid">
                            graph LR
                            A[Swagger核心功能] --> B[API文档自动生成]
                            A --> C[API在线测试]
                            A --> D[接口规范约束]
                            A --> E[版本同步更新]
                            B --> F[减少手动维护]
                            C --> G[提高开发效率]
                            D --> H[统一开发标准]
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Benefits Section -->
    <section class="py-16 px-4 bg-gray-50" id="benefits">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-center text-gray-800">Swagger 核心优势</h2>
            <div class="grid md:grid-cols-2 gap-8">
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="w-12 h-12 bg-indigo-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-bolt text-indigo-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">及时性</h3>
                    <p class="text-gray-600">接口变更后，能够及时准确地通知相关前后端开发人员，确保团队沟通高效。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="w-12 h-12 bg-blue-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-ruler-combined text-blue-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">规范性</h3>
                    <p class="text-gray-600">保证接口的规范性，如接口的地址，请求方式，参数及响应格式和错误信息。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="w-12 h-12 bg-green-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-code-branch text-green-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">一致性</h3>
                    <p class="text-gray-600">接口信息一致，不会出现因开发人员拿到的文档版本不一致，而出现分歧。</p>
                </div>
                <div class="feature-card bg-white p-8 rounded-lg shadow-md transition duration-300">
                    <div class="w-12 h-12 bg-purple-100 rounded-full flex items-center justify-center mb-4">
                        <i class="fas fa-vial text-purple-600 text-xl"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">可测性</h3>
                    <p class="text-gray-600">直接在接口文档上进行测试，以方便理解业务逻辑，提升开发效率。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Getting Started Section -->
    <section class="py-16 px-4 bg-white" id="getting-started">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-gray-800">快速开始</h2>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
                    <span class="w-8 h-8 bg-indigo-600 text-white rounded-full flex items-center justify-center mr-3">1</span>
                    添加依赖
                </h3>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-xml">&lt;!-- 添加swagger依赖 --&gt;
&lt;dependency&gt;
    &lt;groupId&gt;io.springfox&lt;/groupId&gt;
    &lt;artifactId&gt;springfox-swagger2&lt;/artifactId&gt;
    &lt;version&gt;2.9.2&lt;/version&gt;
&lt;/dependency&gt;

&lt;!-- swagger文档ui界面 --&gt;
&lt;dependency&gt;
    &lt;groupId&gt;io.springfox&lt;/groupId&gt;
    &lt;artifactId&gt;springfox-swagger-ui&lt;/artifactId&gt;
    &lt;version&gt;2.9.2&lt;/version&gt;
&lt;/dependency&gt;</code></pre>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
                    <span class="w-8 h-8 bg-indigo-600 text-white rounded-full flex items-center justify-center mr-3">2</span>
                    创建Swagger配置文件
                </h3>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-java">@Configuration
@EnableSwagger2
public class SwaggerConfig {

    /**
     * 创建api应用
     * @return
     */
    @Bean
    public Docket createRestApi() {
        return new Docket(DocumentationType.SWAGGER_2) // Docket是swagger生成文档的核心对象
                .apiInfo(apiInfo()) // 设置文档页面显示的信息
                .select() // 通过select()函数返回一个ApiSelectorBuilder实例,用来控制哪些接口暴露给Swagger来展现
                .apis(RequestHandlerSelectors.basePackage("com.qf.controller")) // 设置api接口扫描位置
                .paths(PathSelectors.any()) // 对所有接口进行监控
                .build(); // 构建
    }

    // 配置api文档信息
    private ApiInfo apiInfo() {
        return new ApiInfoBuilder()
                .title("用户管理服务")
                .description("用户基本的增删改查")
                .version("1.0")
                .contact(new Contact("toString","http:www.baidu.com","toString@qq.com"))
                .build();
    }
}</code></pre>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800 flex items-center">
                    <span class="w-8 h-8 bg-indigo-600 text-white rounded-full flex items-center justify-center mr-3">3</span>
                    启动服务查看接口
                </h3>
                <p class="mb-4 text-gray-700">访问以下地址查看Swagger UI界面：</p>
                <div class="bg-gray-100 p-4 rounded-lg mb-6">
                    <code class="text-indigo-600">http://localhost:8080/swagger-ui.html</code>
                </div>
                <div class="swagger-ui-preview overflow-hidden">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651308354873-10d7769a-e88a-49f3-bc0b-697e80b1e7af.png" alt="Swagger UI界面预览" class="w-full h-auto rounded-lg">
                </div>
            </div>
        </div>
    </section>

    <!-- Core Classes Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-gray-800">核心类与方法</h2>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">Docket类常用方法</h3>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-java">Docket groupName(String var): 设置栏目名
Docket apiInfo(ApiInfo apiInfo): 设置文档信息
Docket pathMapping(String path): 设置api根路径
// Sets为com.goolge.common下的类，Sets.newHashSet("https","http")相当于new HashSet() {{add("https");add("http");}};
Docket protocols(Set&lt;String&gt; protocols): 设置协议
    
ApiSelectorBuilder select(): 初始化并返回一个API选择构造器</code></pre>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">ApiSelectorBuilder类常用方法</h3>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-java">ApiSelectorBuilder apis(Predicate&lt;RequestHandler&gt; selector): 添加选择条件并返回添加后的ApiSelectorBuilder对象
ApiSelectorBuilder paths(Predicate&lt;String&gt; selector): 设置路径筛选，该方法中含一句pathSelector = and(pathSelector, selector);表明条件为相与</code></pre>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">RequestHandlerSelectors 类常用方法</h3>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-java">Predicate&lt;RequestHandler&gt; any(): 返回包含所有满足条件的请求处理器的断言，该断言总为true
Predicate&lt;RequestHandler&gt; none(): 返回不满足条件的请求处理器的断言,该断言总为false
Predicate&lt;RequestHandler&gt; basePackage(final String basePackage): 返回一个断言(Predicate)，该断言包含所有匹配basePackage下所有类的请求路径的请求处理器</code></pre>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">PathSelectors类的常用方法</h3>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-java">Predicate&lt;String&gt; any(): 满足条件的路径，该断言总为true
Predicate&lt;String&gt; none(): 不满足条件的路径,该断言总为false
Predicate&lt;String&gt; regex(final String pathRegex): 符合正则的路径</code></pre>
                </div>
            </div>
        </div>
    </section>

    <!-- Annotations Section -->
    <section class="py-16 px-4 bg-white" id="annotations">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-gray-800">Swagger 注解详解</h2>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">4.1 常见注解</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full annotation-table">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">注解</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">说明</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@Api</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">用在类上，说明该类的作用</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@ApiOperation</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">作用在方法上面，给方法添加说明</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@ApiImplicitParams</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">用在方法上面，给方法多个参数添加说明</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@ApiImplicitParam</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">用在方法上面，给方法参数添加说明</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@ApiModel</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">在实体类上边使用，标记类时swagger的解析类</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@ApiModelProperty</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">使用在被 @ApiModel 注解的模型类的属性上</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@ApiResponses</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">用于表示一组响应信息</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@ApiResponse</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">一般用于表达一个错误的响应信息</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">@ApiParam</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">用于获取url后面的内容</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">4.2 @ApiImplicitParam属性说明</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full annotation-table">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属性</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">说明</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">paramType</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">获取参数的位置,可选如下<br>
                                header：请求参数放置于Request Header，使用@RequestHeader获取<br>
                                query：请求参数放置于请求地址，使用@RequestParam获取<br>
                                path：（用于restful接口）-->请求参数的获取：@PathVariable<br>
                                body：（不常用）<br>
                                form（不常用）</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">name</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">参数名</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">dataType</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">参数类型</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">required</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">参数是否必须传</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">value</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">说明参数的意思</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">defaultValue</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">参数的默认值</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">example</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">swagger测试的案例值，如果设置这个值会覆盖默认值</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">4.3 @ApiModelProperty属性说明</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full annotation-table">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属性</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">说明</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">name</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">属性名称</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">value</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">属性简要说明</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">dataType</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">参数的数据类型</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">required</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">参数是否必须传</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">example</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">属性的示例值</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">4.4 @ApiResponse 属性说明</h3>
                <div class="overflow-x-auto">
                    <table class="min-w-full annotation-table">
                        <thead>
                            <tr>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">属性</th>
                                <th class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">说明</th>
                            </tr>
                        </thead>
                        <tbody class="bg-white divide-y divide-gray-200">
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">code</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">响应码</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">message</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">响应信息</td>
                            </tr>
                            <tr>
                                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">response</td>
                                <td class="px-6 py-4 whitespace-normal text-sm text-gray-500">抛出异常的类</td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </section>

    <!-- Practical Usage Section -->
    <section class="py-16 px-4 bg-gray-50">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-gray-800">实战应用</h2>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">5.1 用swagger注解修饰要发布的方法</h3>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-java">@RestController
@Api(value = "用户接口",description = "描述")
public class UserController {

    @ApiOperation(value = "用户登录",notes = "根据用户名和密码登录")
    @RequestMapping(value = "/login",method = RequestMethod.POST)
    @ApiImplicitParams({
            @ApiImplicitParam(name = "username",value = "用户名",dataType = "String",required = true,paramType = "query"),
            @ApiImplicitParam(name = "password",value = "密码",dataType = "String",required = true,paramType = "query",defaultValue = "admin")
    })
    public User login(String username,String password){
        System.out.println("UserController.login");
        return new User();
    }
}</code></pre>
                </div>
                <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4 mb-6">
                    <h3 class="font-bold text-yellow-800 mb-2">重要细节</h3>
                    <p class="text-yellow-700">Controller中定义的方法必须在@RequestMapper中显示的指定RequestMethod类型，否则SawggerUi会默认为全类型皆可访问，API列表中会生成多条项目。</p>
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651308426314-396c3fec-3c3a-45fe-82ef-4916a24cb86e.png" alt="Swagger细节展示" class="mt-2 rounded-lg">
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">6. RestFul风格接收参数</h3>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-java">@RequestMapping(value = "getUserById/{id}",method = RequestMethod.GET)
@ApiOperation("根据用户id查询用户")
public User getUserById(@ApiParam(name = "id", value = "用户Id", required = true,example = "1") @PathVariable("id") Integer id){
    System.out.println("id = [" + id + "]");
    return new User();
}</code></pre>
                </div>
            </div>
            
            <div class="mb-12">
                <h3 class="text-2xl font-semibold mb-6 text-gray-800">7. 方法接收实体类</h3>
                <h4 class="text-xl font-semibold mb-4 text-gray-700">7.1 注解修饰实体类</h4>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-java">@Data
@AllArgsConstructor
@NoArgsConstructor
@ApiModel(value = "用户对象",description = "添加用户的对象")
public class User {

    @ApiModelProperty(name = "id",value = "用户id",dataType = "Integer",required = false,example = "1")
    private Integer id;

    @ApiModelProperty(name = "username",value = "用户名",dataType = "String",required = true)
    private String username;

    @ApiModelProperty(name = "password",value = "密码",dataType = "String",required = true)
    private String password;
}</code></pre>
                </div>
                
                <h4 class="text-xl font-semibold mb-4 text-gray-700">7.2 接口方法</h4>
                <div class="code-block p-6 mb-6 overflow-x-auto">
                    <pre class="text-sm"><code class="language-java">@RequestMapping(value = "/addUser",method = RequestMethod.POST)
@ApiOperation("添加用户")
public Integer addUser(@RequestBody User user){
    System.out.println("user = [" + user + "]"); 
    return 1;
}</code></pre>
                </div>
                <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
                    <p class="text-blue-700 font-medium">注意：实体类必须要序列化后swagger才能显示在models</p>
                </div>
            </div>
        </div>
    </section>

    <!-- UI Explanation Section -->
    <section class="py-16 px-4 bg-white">
        <div class="container mx-auto max-w-5xl">
            <h2 class="text-3xl font-bold mb-12 text-gray-800">Swagger UI 界面说明</h2>
            
            <div class="grid md:grid-cols-3 gap-6 mb-12">
                <div class="swagger-ui-preview">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651308439967-218deda6-02a4-4277-9ccf-dec2d1f7448f.png" alt="Swagger UI界面1" class="w-full h-auto rounded-lg">
                </div>
                <div class="swagger-ui-preview">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651308450145-68d0aeef-5d5e-4309-959f-4bae34ed8e37.png" alt="Swagger UI界面2" class="w-full h-auto rounded-lg">
                </div>
                <div class="swagger-ui-preview">
                    <img src="https://cdn.nlark.com/yuque/0/2022/png/21449790/1651308459414-f1d18c3d-fa5c-43bf-b640-c6d4d2e3db92.png" alt="Swagger UI界面3" class="w-full h-auto rounded-lg">
                </div>
            </div>
            
            <div class="bg-gray-100 p-6 rounded-lg">
                <div class="mermaid">
                    flowchart TD
                    A[Swagger UI主要区域] --> B[API列表]
                    A --> C[模型定义]
                    A --> D[接口详细信息]
                    B --> E[按Controller分组展示]
                    C --> F[实体类数据结构]
                    D --> G[请求方式]
                    D --> H[请求参数]
                    D --> I[响应示例]
                    D --> J[测试功能]
                </div>
            </div>
        </div>
    </section>

    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
    </script>
</body>
</html>
```